<template>
<div id="main">
    <div class="header">
        <router-link to="/">
        <van-icon name="arrow-left" size="0.5rem" color="#999" />
        </router-link>
        
        <h2>购物车</h2>            
    </div>
    <div class="none" v-if="!cartList.length" style="height:700px;" >     
        <van-empty description="购物车里空的" style="padding:150px 0">            
            
            <router-link to="/">
            <button class="bottom-button" >去逛逛</button>
            </router-link>
        </van-empty>
    </div>
    <div class="body" v-if="cartList.length">
        <div class="cart-page">
        <div class="credit fontcolor">
            您当前可用免保证金额度为：
            <span  class="credit-num">￥0</span>
        </div>
    </div>
    <section>
        <div class="title">
            <van-checkbox 
            class="checkbox"
            v-model="allInfo.allCheck"
            @click="handleAllCheck">
                租赁商品
            </van-checkbox>
            
        </div>
        
        <div 
        class="item-wrapper-box"
        v-for="(item,index) in cartList"
        :key="index"
        >
            <div class="item-wrapper">
                <div class="goods-item">              
                    <van-checkbox class="checkbox" v-model="item.is_check" click="handleCheck(index)">
                    </van-checkbox>
                    <div class="detail">
                        <div class="item-info">
                            <a href="">
                                <img :src="item.productPicInfos[0].filePath">
                            </a>
                            <div class="txt-box">
                            <div class="item-title">
                            <span class="tip">
                            随用随还    
                            </span>
                             {{item.title}}                              
                            </div>            
                        </div>
                        </div>
                        <div class="row">保证金：￥{{item.deposit}}</div>
                        <div class="clearfix">
                            <div class="row-self">
                                租金:<span class="red">
                                    ￥<span class="red-money">{{item.minRentAmount}}</span>
                                    /每月
                                </span>
                            </div>
                            <div class="first-month">首付期数：1/36</div>
                            <div class="stepper">
                                <van-field name="stepper" >
                                    <template #input>
                                        <van-stepper v-model="item.count" input-width="40px" button-size="23px" />
                                    </template>
                                </van-field>
                            </div>
                        </div>
                    </div>
                    <div class="del" @click="handleDel(index)">删除</div>                    
                </div>
            </div>
            <div class="row rows">
                <div class="row-item">
                    起租日期：
                    <span class="date-wrap">2021-09-11</span>
                </div>
            </div>
        </div>
    </section>
    <footer>
        <van-submit-bar  :price="allInfo.checkPrice*100"  >
        <van-checkbox 
        class="checkbox"
        v-model="allInfo.allCheck"
        @click="handleAllCheck"
        >
        全选
        </van-checkbox>
        
        <template #button>           
            <router-link to="/order" class="btn-total">去结算<span>({{allInfo.checkNum}})</span></router-link>
        </template>

        <template #tip>
            应付总计：￥{{allInfo.checkPrice}} <span class="checks">查看明细</span>
        </template>
        
        </van-submit-bar>
    </footer>
    </div>
    
</div>
</template>

<script>
//import {getCartList} from '../api/cartList'
import Vue from 'vue';
import { Icon } from 'vant';
import { Checkbox, CheckboxGroup } from 'vant';
import { SubmitBar } from 'vant';
import { Stepper } from 'vant';
import { Empty } from 'vant';
import { Button } from 'vant';

Vue.use(Button);
Vue.use(Empty);
Vue.use(Stepper);
Vue.use(SubmitBar);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Icon);
    export default {
        // data() {
        //     return {
        //         checked: true,
        //         cartlist:null,
                
        //     }
        // },
        computed: {
			cartList() {
				return this.$store.state.cart.cartlist
			},
			allInfo(){				
				return this.$store.getters['cart/allinfo']
			}
		},
        methods: {
            handleCheck(i) { //单选事件函数
				this.$store.commit('cart/cartCheckMut',i)

			},
            handleAllCheck(){ //全选事件
                this.$store.commit('cart/cartAllCheckMut',this.allInfo.allCheck)
                // this.allInfo.allCheck=!this.allInfo.allCheck
            },
            handleDel(idx){
                this.$store.commit('cart/cartDelMut',idx)
            }
        },
        
    }

</script>

<style lang="css" src="../assets/css/cart.css" scoped></style>
<style lang="css" src="../assets/css/reset.css" scoped></style>
<style lang="scss" scoped>
.bottom-button {
    width: 160px;
    height: 40px;
    font-size: 18px;
    color: #fff;
    background: #37a3ff;
    border-radius: 20px;
}

.btn-total{
    color:#fff;
    background: #37a3ff;
    width: 105px;
    height: 44px;
    text-align: center;
    line-height: 44px;
}
</style>